<template>
    <!-- 营销素材 -->
    <div class="madp-market-material" v-if="!loading">
        <div>
            <tabs-view :leftMenu="sortList" :topMenu="topMenu" @changeTab="changeTab" :showRightTag="!(page.groupId == -2 && (hotStateType == 1 || hotStateType == 2))">
                <div class="main">
                    <el-input v-model="searchValue" @change="searchFn" suffix-icon="el-icon-search" placeholder="请输入素材名称"></el-input>
                    <div v-if="materialList.length === 0" class="madp-no-chatInfo">
                        <img class="madp-not-found-img" src="@/assets/img/no-words.png" />
                        <div class="madp-not-found-text">暂无内容</div>
                    </div>
                    <div v-else class="container">
                        <mescroll-view class="scroll-view" :showMoreBtn="page.current * page.size < page.total" @getMoreData="getMoreData">
                            <div class="container-list">
                                <list-item-market v-for="(item, idx) in materialList" :info="item" :key="idx" @handleClickItem="sendchat(item)"> </list-item-market>
                            </div>
                        </mescroll-view>
                    </div>
                </div>
            </tabs-view>
        </div>
    </div>
</template>
<script>
    // 引入mescroll的vue组件
    import MescrollView from '@/components/material/mescroll-view.vue';
    import TabsView from '@/components/material/tabs-view.vue';
    import ListItemMarket from '@/components/material/list-item-market.vue';

    import * as Utils from '../utils/util';
    import * as marketMaterialApi from '@/api/market-material';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        name: 'marketMaterial',
        mixins: [mxInitWxConfig],
        props: [],
        components: {
            MescrollView,
            TabsView,
            ListItemMarket
        },
        data() {
            return {
                loading: true,
                hotStateType: '',
                searchValue: '',
                sortList: [
                    { classificationName: '推荐', id: -1, name: '推荐' },
                    { classificationName: '热榜', id: -2, name: '热榜' }
                ],
                topMenu: [
                    {
                        name: '文章',
                        id: '1'
                    },
                    {
                        name: '链接',
                        id: '2'
                    },
                    {
                        name: '海报',
                        id: '3'
                    }
                    // {
                    //   name: 'PDF',
                    //   id: '4'
                    // },
                    // {
                    //   name: 'PPT',
                    //   id: '5'
                    // },
                    // {
                    //   name: '表格',
                    //   id: '6'
                    // },
                    // {
                    //   name: '文档',
                    //   id: '7'
                    // }
                ],
                page: {
                    current: 1,
                    size: 10,
                    total: 0,
                    groupId: '',
                    type: ''
                },
                materialList: []
            };
        },
        created() {},
        mounted() {},
        watch: {
            wxUserId(newVal, oldVal) {
                if (newVal) {
                    this.getMediumGroupList();
                }
            }
        },
        methods: {
            getMoreData() {
                // 加载更多数据
                this.page.current++;
                this.getMaterialList();
            },
            changeTab(idxs) {
                this.searchValue = '';
                if (idxs.left == 1) {
                    // 热榜是获取热榜排行状态值
                    marketMaterialApi.hotState().then((res) => {
                        this.hotStateType = res.data.data.hotState;
                        this.page.groupId = this.sortList[idxs.left].id;
                        this.page.type = this.topMenu[idxs.top].id;
                        this.materialList = [];
                        this.page.current = 1;
                        this.getMaterialList();
                    });
                } else {
                    this.page.groupId = this.sortList[idxs.left].id;
                    this.page.type = this.topMenu[idxs.top].id;
                    this.materialList = [];
                    this.page.current = 1;
                    this.getMaterialList();
                }
            },
            searchFn() {
                this.materialList = [];
                this.page.current = 1;
                this.getMaterialList();
            },
            //获取分组列表
            getMediumGroupList() {
                marketMaterialApi.classificationList().then((res) => {
                    this.loading = false;
                    let list = res.data.data;
                    list.map((ele) => {
                        ele.name = ele.classificationName;
                    });
                    this.sortList.push(...list);
                    this.page.groupId = this.sortList[0].id;
                    this.page.type = this.topMenu[0].id;
                    this.getMaterialList();
                });
            },
            // 内容列表
            getMaterialList() {
                if (this.page.groupId == '-1') {
                    // 推荐
                    this.getRecommendedListFn();
                } else if (this.page.groupId == '-2') {
                    // 热榜
                    if (this.hotStateType == 1 || this.hotStateType == 2) {
                        this.sendAndOpenTimesFn();
                    } else if (this.hotStateType == 3 || this.hotStateType == 4) {
                        this.sendAndOpenTimesTypeFn();
                    }
                } else {
                    if (this.page.type == 1) {
                        this.getArticleListFn();
                    } else if (this.page.type == 2) {
                        this.getLinkListFn();
                    } else if (this.page.type == 3) {
                        this.getPostListFn();
                    } else if (this.page.type == 4) {
                        this.getPdfListFn();
                    } else if (this.page.type == 5) {
                        this.getPptListFn();
                    } else if (this.page.type == 6) {
                        this.getExcelListFn();
                    } else if (this.page.type == 7) {
                        this.getWordListFn();
                    }
                }
            },
            // 获取推荐列表
            getRecommendedListFn() {
                let obj = {
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue,
                    type: this.page.type
                };
                marketMaterialApi.getRecommendedList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            // 热榜素材列表（得到素材打开次数和发送次数）
            sendAndOpenTimesFn() {
                let obj = {
                    hotState: this.hotStateType,
                    pageCurrent: this.page.current,
                    pageSize: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.sendAndOpenTimes(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            // 热榜素材列表（得到素材打开次数和发送次数类型）
            sendAndOpenTimesTypeFn() {
                let obj = {
                    hotState: this.hotStateType,
                    pageCurrent: this.page.current,
                    pageSize: this.page.size,
                    type: this.page.type,
                    title: this.searchValue
                };
                marketMaterialApi.sendAndOpenTimesType(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //文章标题模糊分页查询
            getArticleListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getArticleList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //链接标题模糊分页查询
            getLinkListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getLinkList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //海报标题模糊分页查询
            getPostListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getPostList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //pdf标题模糊分页查询
            getPdfListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getPdfList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //PPT标题模糊分页查询
            getPptListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getPptList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //表格标题模糊分页查询
            getExcelListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getExcelList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            //文档标题模糊分页查询
            getWordListFn() {
                let obj = {
                    classification: this.page.groupId,
                    current: this.page.current,
                    size: this.page.size,
                    title: this.searchValue
                };
                marketMaterialApi.getWordList(obj).then((res) => {
                    let list = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.current == 1) {
                        this.materialList = list;
                    } else {
                        this.materialList.push(...list);
                    }
                });
            },
            // 分享消息到当前会话
            sendchat(item) {
                this.sendData = item;
                // 从单聊会话的工具栏进入 从群聊会话的工具栏进入 从会话的聊天附件栏进入
                if (this.entry === 'single_chat_tools' || this.entry === 'group_chat_tools' || this.entry === 'chat_attachment') {
                    let sortItem = this.sortList.find((ele) => ele.id == this.page.groupId);
                    let location = encodeURIComponent(`侧边栏-营销素材-${sortItem ? sortItem.name : ''}`); // 侧边栏-营销素材-${分组名称}
                    let linkUrl = Utils.joinSearchString(
                        {
                            materialId: item.id,
                            materialType: item.type,
                            wxUserId: this.wxUserId,
                            wxExternalUserid: this.wxExternalUserid,
                            chatId: this.chatId,
                            event: 'marketing',
                            corpId: Utils.getSession({ name: 'MadpCorpId' }),
                            tenantId: 1,
                            location: location,
                            url: encodeURIComponent(item.type === 2 || item.arAttribute === 1 ? item.marketingUrl : Utils.apiUrl + item.marketingUrl),
                            title: encodeURIComponent(item.title),
                            trackBehavior: item.trackBehavior,
                            trackDynamic: item.trackDynamic,
                            timestr: new Date().getTime()
                        },
                        `${Utils.apiUrl}${item.trackBehavior == 1 ? '/cp/behavior-track/track' : '/cp/marketinghotwechat/open'}`
                    );
                    let desc = '';
                    if (item.type === 1 || item.type === 2) {
                        desc = item.marketingDescribe || '描述';
                    } else {
                        desc = item.marketingSize || '0kb';
                    }
                    let titleMsg = item.title || '标题';
                    let imgUrl = '';
                    if (item.arAttribute === 1) {
                        imgUrl = item.marketingCover;
                    } else if (item.type === 2) {
                        if (item.marketingCover.indexOf('/mfs/') > -1) {
                            imgUrl = Utils.apiUrl + item.marketingCover;
                        } else {
                            imgUrl = item.marketingCover;
                        }
                    } else if (item.type === 3) {
                        imgUrl = Utils.apiUrl + item.marketingUrl;
                    } else {
                        imgUrl = Utils.apiUrl + item.marketingCover;
                    }
                    let params = {
                        link: linkUrl, //H5消息页面url 必填
                        title: titleMsg, //H5消息标题
                        desc: desc, //H5消息摘要
                        imgUrl: imgUrl //H5消息封面图片URL
                    };
                    this.$wxApi.sendChatMessage('news', params).then((res) => {
                        // 发送成功 统计发送次数
                        let obj = {
                            id: item.id,
                            type: item.type,
                            wxExternalUserid: this.wxExternalUserid,
                            chatId: this.chatId
                        };
                        marketMaterialApi.sendTimes(obj).then((res) => {
                            if (res.data.code === 0) {
                            }
                        });
                    });
                }
            }
        }
    };
</script>
<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .madp-market-material {
        width: 100%;
        .main {
            padding: 10px 8px;
            padding-right: 16px;
        }
        /deep/.el-input__inner {
            background: #f0f0f0;
            border-radius: 14px;
            height: 28px;
            line-height: 28px;
            border: none;
            width: 100%;
        }
        /deep/.el-input__icon {
            line-height: 28px;
        }
        .container {
            width: 100%;
            height: 100%;
            .scroll-view {
                height: calc(100vh - 90px);
                margin-top: 6px;
            }
            .container-list {
                display: flex;
                flex-direction: column;
            }
        }
        .madp-no-chatInfo {
            text-align: center;
            margin-top: 30px;
            font-size: 15px;
            color: #696969;
            .madp-not-found-img {
                width: 140px;
                height: 84px;
                margin-top: 10px;
            }
            .madp-not-found-text {
                margin-top: 15px;
            }
        }
    }
</style>
